<template>
	<view class="loaderFlex flex" :style="{ '--fss': app.theme.fss() }">
		<view class="loader" :style="{ background: background }"></view>
	</view>
</template>

<script setup>
	import { defineProps, inject } from "vue";
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 转圈的颜色
		background: {
			type: String, 
			default: ""
		},
		
	});
</script>

<style scoped lang="scss">
	.loaderFlex{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		.loader {
			width: 68rpx;
			padding: 9rpx;
			aspect-ratio: 1;
			border-radius: 50%;
			background: #FFF;
			--_m: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
			mask: var(--_m);
			-webkit-mask: var(--_m);
			mask-composite: subtract;
			-webkit-mask-composite: source-out;
			animation: l3 1s infinite linear;
		}
		@keyframes l3 {to{transform: rotate(1turn)}}
	}
</style>